<template>
     <el-tooltip class="item" effect="light"  placement="top-start" v-if="(isShows&&isSearch=='Y')">
        <div slot="content" :style="styless">{{content}}</div>
        <el-select  :id="id" :class="classs"  v-model="currentValue" placeholder="请选择"  multiple class='myselect' :style="styless"  :disabled="disabled">
            <el-option
            v-for="(item,index) in optionnews"
            :key="index"
            :label="item.optname"
        
            size="small"
            :value="item.optvalue">
            </el-option>
        </el-select>
    </el-tooltip>
    <el-select   v-else-if="(isShows)" :id="id" :class="classs"  v-model="currentValue" placeholder="请选择"  multiple class='myselect' :style="styless"  :disabled="disabled">
        <el-option
        v-for="(item,index) in optionnews"
        :key="index"
        :label="item.optname"
    
        size="small"
        :value="item.optvalue">
        </el-option>
    </el-select>
</template>
 
<script>
import G from 'glob';

    export default {
        props:['id','options','styles','value','data','index','isreadonly','isBorder','extype','valsql','appid','dataField','isSearch','isChange','exkey','sign','time','postUrl','isEmptyHiden'],
        name: "input-select-multiple",
        data(){
            return {
                currentValue:[],
                disabled:false,
                currentValueOld:'',
                classs:'',
                first:'Y',
                styless:"width:100%",
                pId:"",
                cId:"",
                changeId:{},
                optionnews:this.options,
                oldValue:"",
                content:"",
                isShows:true
            }
        },
        created(){
            if(this.isBorder=='N'){
                this.classs="no-border";
            }
            this.getSelect();
            
            this.setData();
            if(this.isreadonly=='Y')
                this.disabled=true;

            if(this.isSearch=="Y"){
                this.styless="width:400px;max-height:35px;overflow:hidden"
            }
        },
        methods:{
            getSelect(){
                console.log(this.data,"this.search1122334445==========")
                if(this.valsql){
                    
                    let ids=this.id.split(".");

                    let valsql=this.valsql.split("|");
                    let sql=valsql[0];
                    let oldSql=this.valsql;
                    this.changeId={};
                    console.log(this.data);
                    for(let i=1;i<valsql.length;i++){
                        let id=valsql[i];
                        console.log("id=========="+id+"=="+ids[0]+"=="+this.id);
                        if(this.isSearch=='Y'){
                            let v="";
                            for(let j=0;j<this.data.length;j++){
                                let searchId=this.data[j].searchId;
                                if(searchId==id){
                                    v=this.data[j].vals;
                                }
                            }
                            v=v.replace(/,/g,"','");
                            sql=sql.replace('##'+id+'##',v);
                            while(sql.indexOf('##'+id+'##')!=-1){
                                sql=sql.replace('##'+id+'##',v);
                            }
                            this.changeId[id]=v;
                        }else{
                            sql=sql.replace('##'+id+'##',this.data[ids[0]][id]);
                            while(sql.indexOf('##'+id+'##')!=-1){
                                sql=sql.replace('##'+id+'##',this.data[ids[0]][id]);
                            }
                            this.changeId[id]=this.data[ids[0]][id];
                        }
                        
                        
                            
                    }
                    let appid=this.appid;
                    if(!appid){
                        appid="business"
                    }
                    if(sql.indexOf("appid=")!=-1){
                        let sqls=sql.split("#");
                        sql=sqls[1];
                        appid=sqls[0];
                        appid=appid.replace("appid=","");
                    }
                   //console.log("sql=="+sql)
                    this.$postEncrypt(appid,"/api/common/getData",{
                        sql:sql,
                        oldSql:oldSql,
                        times:this.time,
                        sign:this.sign
                    }).then(data=>{
                        
                        this.optionnews=[];
                        
                        for(let i=0;i<data.length;i++){
                            if(!data[i].optvalue){
                                data[i].optvalue=data[i].optname;
                            }
                            this.optionnews.push(data[i])
                        }
                       
                        //目前是海口做多级列表搜索框显示隐藏使用
                        if(this.isEmptyHiden=='Y'&&this.optionnews.length==0){
                            //this.isShows=false;
                            let item={
                                index:this.index,
                                type:"hidden"
                            }
                            this.$emit("hidenSearchInput",JSON.stringify(item))
                            if(this.isSearch=='Y'){
                                this.currentValue=[];
                            }
                        }else if(this.isEmptyHiden=='Y'){
                            //this.isShows=true;
                            let item={
                                index:this.index,
                                type:"show"
                            }
                            this.$emit("hidenSearchInput",JSON.stringify(item))
                        }
                    })
                }
                 if(this.postUrl){
                    this.$post("",this.postUrl,{
                        
                    }).then(data=>{
                        let option={
                            optname:"请选择...",
                            optvalue:""
                        }
                        this.optionnews=[];
                        this.optionnews.push(option);
                        for(let i=0;i<data.length;i++){
                            if(!data[i].optvalue){
                                data[i].optvalue=data[i].optname;
                            }
                            this.optionnews.push(data[i])
                        }
                    })
                }
            },
            setData(){
                if(this.first!='Y'){
                    this.currentValueOld=this.currentValue.join(",");
                    this.first="N";
                }
                if(this.isSearch!='Y'){
                    if(!this.value){
                        if(this.data){
                            let ids=this.id.split(".");
                            if(ids.length>1){
                                let p=ids[0];
                                let id_=ids[1];
                                this.pId=p;
                                this.cId=id_;
                               // console.log("pid====================="+p+"="+id_);
                                if(this.index||this.index=='0'){
                                    try{
                                        let vals=unescape(this.data[p][this.index][id_]);
                                        if(vals)
                                            this.currentValue=vals.split(",");
                                    }catch(e){}
                                }else{
                                    try{
                                        let vals=unescape(this.data[p][id_]);
                                        if(vals)
                                            this.currentValue=vals.split(",");
                                    }catch(e){}
                                }
                               // console.log(this.data);
                               // console.log("curentValue===================================="+this.currentValue);
                                
                            }else{
                                if(this.dataField){
                                    if(this.data[this.dataField][this.index][this.id]){
                                        let vals=unescape(this.data[this.dataField][this.index][this.id]);
                                        this.currentValue=vals.split(",");
                                    }
                                        
                                }else{
                                    if(this.data[this.id]){
                                        let vals=unescape(this.data[this.id])
                                        this.currentValue=vals .split(",");
                                    }
                                        
                                }
                            }
                        
                        }
                    }else{
                        
                        let data={};
                        data.id=this.id;
                        data.val=this.value;
                        data.index=this.index;
                        this.$emit('input',JSON.stringify(data));
                    }
                }else{
                    if(this.data[this.index].vals)
                        this.currentValue=unescape(this.data[this.index].vals).split(",")
                }
                this.oldValue=this.currentValue.join(",");
               
            }
        },
        computed:{
            dataFields:function(){
                
                if(this.pId)
                    return this.data[this.pId][this.cId];
                else if(this.dataField){
                    return this.data[this.dataField][this.index];
                }else if(this.isSearch=='Y'){
                    console.log("dataFields==========="+this.pId+"=="+this.dataField+"=="+this.isSearch)
                    return this.data[this.index].vals;
                }
            }
        },
        watch:{
            currentValue: function (val,oldval) { //currentValue值变动就向父组件传值
                console.log("multipleselect======================================");
                console.log(this.optionnews,"this.optionnews=================")
                let labels="";
                
                val=val.join(",")
                let labelss="";
                for(let i=0;i<this.optionnews.length;i++){
                    let label=this.optionnews[i].optname;
                    let val_=this.optionnews[i].optvalue;
                    if((","+val+",").indexOf(","+val_+",")!=-1){
                        labels=labels=="" ? label:labels+","+label;
                        labelss=labelss=="" ? label:labelss+"；"+label;
                    }   
                }
                this.content=labelss;
                if(!val){
                    val="";
                }
                if(this.oldValue==val){
                    return;
                }
                 this.GLOBAL.isChange=true;
                this.currentValueOld=oldval.join(",");
                if(this.isChange=="Y"){
                    let data={};
                    data.id=this.id;
                    data.val=val;
                    data.index=this.index;
                    this.$emit('input',JSON.stringify(data));
                }
                console.log("dataField=============================="+this.dataField+"=="+this.index);
                if(this.isSearch!='Y'){
                 //   console.log("111111111111111111111==="+this.dataField+"=="+this.index+"=="+val+"="+this.id)
                    if(this.dataField){
                       
                        let data_=this.data[this.dataField][this.index];
                        data_[this.id]=val;
                        this.$set(this.data[this.dataField],this.index,data_);
                    }else{
                        if(this.index=="0"||this.index){
                            console.log("this.data====="+this.pId+"=="+this.index+"=="+this.cId+"=="+val+"=="+this.id)
                            this.$set(this.data[this.pId][this.index],this.cId,val)
                        }else
                            this.$set(this.data[this.pId],this.cId,val)
                    }
                    
                    //this.extye==show代表这个下拉框要控制一些元素显示和隐藏，等于Y就是隐藏
                    if(this.extype=="show"){
                        for(let id in this.data.showOpr){
                        
                            let flag=this.data.showOpr[id];
                            if(flag==this.currentValueOld){
                                this.data.show[id]="Y"
                            }
                            if(flag==this.currentValue){
                                this.data.show[id]='N'
                            }
                        }
                    }
                    if(this.exkey){
                      //  console.log("exkey-----"+this.exkey);
                      //  console.log(this.exkey);
                        let obj=null;

                        for(let i=0;i<this.optionnews.length;i++){
                            let optvalue=this.optionnews[i].optvalue;
                            if(optvalue==this.currentValue){
                                obj=this.optionnews[i];
                            }
                        }
                       // console.log("dddddddddddddddddddddddddddddd")
                        let exkeys=this.exkey;
                        try{
                            exkeys=exkeys.replace(/'/g,"\"");
                             exkeys=JSON.parse(exkeys);
                        }catch(e){}
                       // console.log(exkeys)
                       
                        for(let key in exkeys){
                            if(key=="label")
                                continue;
                            let v=exkeys[key];
                            this.$set(this.data[this.pId],key,obj[v])
                        }
                    }
                }else{
                    this.$set(this.data[this.index],"vals",val);
                }
                this.oldValue=val;

                if(this.exkey&&this.exkey.label){
                    console.log("labels================="+labels+"=="+this.pId+"=="+this.exkey.label)
                    if(this.dataField){
                         this.$set(this.data[this.dataField][this.index],this.exkey.label,labels);
                    }else
                        this.$set(this.data[this.pId],this.exkey.label,labels);
                }
                
            },
            value:function (val) { //对值进行验证
                
            },
            options:function(val){
                this.optionnews=val;
            },
            data:{
                handler: function (newVal) {
                    console.log("change===================="+this.changeId.length)
                    console.log(this.changeId)
                    //this.setData();
                    if(this.changeId){
                        
                        let isChange=false;
                        if(this.isSearch=='Y'){
                            for(let key in this.changeId){
                                let v="";
                                for(let j=0;j<this.data.length;j++){
                                    if(key==this.data[j].searchId){
                                        v=this.data[j].vals;
                                    }
                                }
                                console.log(this.id+"="+key+"=="+v+"=="+this.changeId[key])
                                if(v!=this.changeId[key]){
                                    isChange=true;
                                    this.changeId[key]=v;
                                    console.log(this.changeId)
                                }
                            }
                        }else{
                            for(let key in this.changeId){
                                if(this.data[this.pId][key]!=this.changeId[key]){
                                    isChange=true;
                                }
                            }
                            
                        }
                        console.log("isChage========="+isChange);
                        if(isChange){
                            this.getSelect();
                        }
                        
                    }
                    
                },      
                deep: true    //深度监听
            }
        }
    }
</script>
<style scoped>
.no-border>>>.el-select {
    border: 0;
  }
.no-border{
    border:0 !important;
}
.item{
    width:500px;
}
</style>